import { useEffect, useState } from 'react'
import '../assets/styles/RecomMend.css'
import Tu01 from "../assets/imgs/Tu01.png"
import jiantou from "../assets/imgs/jiantou.png"

export default function Const() {
    const [data, setData] = useState([])
    function bont(cont) {
        console.log(cont);
    }
    useEffect(() => {
        getData()
    }, [])

    function getData() {
        fetch(`http://127.0.0.1:5174/api/top/album`, {
            method: 'get',
            // body:JSON.stringify(value),
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;'
            },
        })
            .then(res => {
                // console.log("成功", res);
                if (res.status == 200) {
                    res.json().then(res => {
                        if (res.code == 200) {
                            // console.log("成功", res.weekData);
                            setData(res.weekData)
                        }
                    })
                }
            })
            .catch(err => {
                // resk就是后端放回的结果
                console.log("失败1", err);
            })
    }
    return (
        <>
            <div className='body'>
                <div className='left'>
                    <div className='headRecommend'>
                        <div className='headLeft'>
                            <img className='tu' src={Tu01} alt="" />
                            <h3>新碟上架</h3>
                        </div>
                        <div className='headRight'>
                            更多
                            <img className='tu' src={jiantou} alt="" />
                        </div>
                    </div>
                    <div className='const'>
                        <div className='const2' onClick={() => bont(1)} >&lt;</div>
                        <div className='const3' onClick={() => bont(-1)}>&gt;</div>
                        <div className='xiaodiv'>
                            {
                                data.map(item => {
                                    return (
                                        <div className='constDiv' key={item.blurPicUrl}>
                                            <img className='constimg' src={item.blurPicUrl} alt="" />
                                            <div className='musicname'>{item.name}</div>
                                            <div className='name'>{item.company}</div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}